import React, { Component } from "react";
import { Link } from "react-router-dom";
import _Http from "../config/api";
import {setCookie} from '../config/omsCookiesFun';
import {Notice} from '../config/omsLayer';
export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      translate:{
        cn:{
          "您的帐号" : "您的帐号",
          "密码" : "密码",
          "注册" : "注册",
          "登录" : "登录",
          "账号不能为空" : "账号不能为空",
          "密码不能为空" : "密码不能为空",
        },
        en:{
          "您的帐号" : "Your Account",
          "密码" : "Password",
          "注册" : "Register",
          "登录" : "Log In",
          "账号不能为空" : "Account cannot be empty",
          "密码不能为空" : "Password cannot be empty",
        }
     }
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  pageTr(){
    var _this = this,
        langIndex = _this.props.langKey,
        page = _this.state.translate[langIndex];
    return page;
  }
  validateForm(item, jq){
    var _this = this,
        page = _this.pageTr(),
        tempPos1 = jq('#'+item).find("input[name='account']"),
        tempPos2 = jq('#'+item).find("input[name='password']");
    return Notice.isEmpty([
      {val:tempPos1.val(), item:tempPos1, msg:page['账号不能为空']},
      {val:tempPos2.val(), item:tempPos2, msg:page['密码不能为空']}
    ]);
  }
  handleSubmit(e) {
    var _this = this,
        formId = _this.refs.myForm.id,
        langIndex = _this.props.langKey,
        localState = _this.props.location.state,
        redirect =localState?localState.from.pathname:'/';

    (function($){
        if( _this.validateForm(formId, $)){
          _Http.post('/login.php', $('#'+formId).serialize())
          .then(function (res) {
            setCookie('userInfo',res.data.result,'m30');
            setCookie('sessionId',res.data.sessionId,'m30');
            _this.props.updateIsLogin(true);
            _this.props.history.push(redirect);
          })
          .catch(function (error) {
            Notice.errorTips(error[langIndex]);
          });
        } 
    })(window.jQuery)

    e.preventDefault();//阻止表单的常规提交
  }

  componentWillUnmount(){// 组件即将销毁
     Notice.closeAll();
  }
  render() {
    var _this = this,
        tempMenuList = [],
        page = _this.pageTr(),

        strHtmls = [
          {icon:'fa-user',html:<input type="text" className="form-control" name="account" placeholder={page['您的帐号']}/>},
          {icon:'fa-lock',html:<input type="password" className="form-control" name="password" placeholder={page['密码']} />},
        ] ;

    for(var j = 0, len = strHtmls.length;j < len; j++){
      tempMenuList.push(
        <div className="form-group" key={j}>
              <div className="input-group">
                <span className="input-group-addon"><i className={'fa '+ strHtmls[j].icon}></i></span>
                {strHtmls[j].html}
              </div>
            </div>
      );
    }
    return (
      <div className="panel-default formAction w400">
        <div className="panel-heading">
          <h1 className="panel-title"><i className="fa fa-sign-in"></i>&nbsp;{page['登录']}</h1>
        </div>
        <div className="panel-body">
          <form action="" id="registerForm" ref="myForm" onSubmit={this.handleSubmit}>
            {tempMenuList}
            <div className="text-right">
              <Link to='/register' className="btn btn-primary"><i className="fa fa-location-arrow"></i>&nbsp;{page['注册']}</Link>
              <button type="submit" className="btn btn-primary" ><i className="fa fa-key"></i>{page['登录']}</button>
            </div>
          </form>
        </div>
      </div>
    );

  }
}